import React, { useState, useEffect } from "react";
import { Carousel } from "antd";
import "antd/dist/antd.css";
import "./integral.css"
import special from "../../static/积分商城logo.png";
import axios from "axios";
import InterIP from '../../IP/IP'
import { useNavigate } from "react-router-dom";
export default function Integral() {
  const navigate = useNavigate();
    const contentStyle = {
        width: "1500px",
        height: "500px",
    };
    const contentImgStyle = {
        width: "100%",
        height: "100%",
    };
    const [integralData,setIntegralData] = useState([]);
    useEffect(()=>{
      let IP = InterIP().props.children;
        axios.post('http://'+IP+':3000/index/selIntegralProduct',{
        }).then((res) =>{
            setIntegralData((integralData) => integralData = res.data)
        })
    },[])
  function integralDetails(id) {
    return () => {
      localStorage.integralId = id;
      navigate('/home/integralDetails')
    }
  }
    return (
        <div>
          <div className="lfy_index_integral_total_carousel">
            <Carousel autoplay>
                <div style={contentStyle}>
                    <img style={contentImgStyle} src={special} alt="" />
                </div>
                <div style={contentStyle}>
                    <img style={contentImgStyle} src={special} alt="" />
                </div>
                <div style={contentStyle}>
                    <img style={contentImgStyle} src={special} alt="" />
                </div>
                <div style={contentStyle}>
                    <img style={contentImgStyle} src={special} alt="" />
                </div>
            </Carousel>
            </div>
            <div className="lfy_index_integral_total">
            <ul className="lfy_index_integral_total_list">
            {integralData.map((data) =>
              <li key={data.integral_id}>
                <div onClick={integralDetails(data.integral_id)}>
                  <img src={data.integral_img} alt="" />
                </div>
                <div>
                  <h4>{data.integral_name}</h4>
                  <h5>{data.integral_introduce}</h5>
                  <h6>
                    <span>积分:{data.integral_price}</span>
                    <span>价值:￥{data.original_price}</span>
                  </h6>
                  <h3>立即兑换</h3>
                </div>
              </li>
            )}
          </ul>
          </div>
        </div>
    )
}
